<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Partnerships</title>
    <link rel="stylesheet" href="css/reset.css">
  <link rel="Shortcut Icon" href="images/icon.png" type="image/x-icon">  
    <style>
        /*选项卡的样式*/
        
        .option_card {
            width: 90%;
            margin: 100px auto;
            overflow: hidden;
        }
        
        .option_card .options {
            width: 23%;
            float: left;
            border-right: 1px solid #e5e5e5;
        }
        
        .option_card .options li {
            height: 35px;
            line-height: 35px;
            color: #000;
            cursor: pointer;
            margin-top: 12px;
            width: 99.2%;
            font-size: 16px;
        }
        
        .option_card .options li:last-child {
            margin-bottom: 12px;
        }
        
        .option_card .options li.current {
            border-right: 5px solid #fab554;
            color: #fab554;
        }
        
        .option_card .card {
            width: 76%;
            float: right;
            margin: 0 auto;
        }
        .option_card .card p{
            line-height: 30px;
        }
        
        .option_card .card ul {
            width: 98%;
            margin: 0 auto;
            overflow: hidden;
            
        }
        
        .option_card .card li {
            display: none;
        }
        
        .option_card .card li.current {
            display: block;
        }
        /*logo的弹性布局*/
        
        .option_card .card .flex-container {
            
            display: flex;
            justify-content: space-between;
            width: 95%;
           flex-wrap: wrap;
           margin-left: 5%;

          
           

        }
        
        .option_card .card .item {
            width:25.5%;
            margin-bottom: 50px;          
        }
        
        .option_card .card .item img {
            width: 100%;
            height: 70px;
        }
        #cooperationModeCon img{
            box-shadow: 0px 0px 5px 0px #999;

        }
    </style>
</head>

<body>
    <div class="header">
        <div class="nav">
            <div class="logo"><img src="images/logo_01.png" alt=""></div>
            <ul class="navul">
                <li><a href="index.html">Home</a></li>
                <li><a href="p2.html">About us</a>
                    <ul class="child">
                        <li><a href="p2.html?id=1">Overview</a></li>
                        <li><a href="p2.html?id=2">CEO Message</a></li>
                        <li><a href="p2.html?id=3">Vision and Mission</a></li>
                        <li><a href="p2.html?id=4">Management Team</a></li>
                        <li><a href="p2.html?id=5">Scientific Advisory Board</a></li>
                        <li><a href="p2.html?id=6">Investors</a></li>
                    </ul>
                </li>
                <li>
                    <a href="p3.html">R&D</a>
                    <ul class="child">
                        <li><a href="p3.html">Pipeline</a></li>
                        <!-- <li><a href="p3.html?id=2">Pre-clinical Development</a></li>
                        <li><a href="p3.html?id=3">Clinical & Regulatory</a></li> -->
                        <li><a href="p3.html?id=4">Facility</a></li>

                    </ul>

                </li>
                <li>
                    <a href="p4.html"  style="font-weight:bold;font-style: italic;">Partnerships</a>
                    <ul class="child">
                        <li><a href="p4.html">Business Development</a></li>
                        <li><a href="p4.html?id=2">Partners</a></li>
                    </ul>
                </li>
                <li><a href="p5.html">News</a></li>
                <li>
                    <a href="p6.html">Contact</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="main">
        <div class="option_card">
            <div class="options">
                <ul>
                    <li class="current" id="cooperationMode">Business Development</li>
                    <li id="cooperativePartner">Partners</li>
                </ul>
            </div>
            <div class="card">
                <ul>
                    <li class="current" id="cooperationModeCon">
                      
                    </li>
                    <li>
                        <div class="flex-container" id="cooperativePartnerCon">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="footer">
        <div class="footer_nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="p2.html">About us</a></li>
                <li><a href="p3.html">R&D</a></li>
                <li><a href="p4.html" style="font-weight:bold;font-style: italic;">Partnerships</a></li>
                <li><a href="p5.html">News</a></li>
                <li><a href="p6.html">Contact</a></li>
            </ul>
            <div class="logo"><img src="images/footer_logo.png" alt=""></div>

        </div>
    </div>
    <!-- 版权信息 -->
    <div class="copy">
        <p>Copyright 2018 © EOC Pharma 沪ICP备 17043104号
        </p>
    </div>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/public.js"></script>
    <script>
        //选项卡事件
        $(".options li").click(function() {
            // $(this).addClass('current').siblings().removeClass('current');
            // $(".card li").hide().eq($(this).index()).show();
            window.location = "p4.html?page=" + ($(this).index() + 1);

        })
        if (GetQueryString("id") == null) {
            $(".card li").hide().eq(0).show();

        } else {
            $(".card li").hide().eq(GetQueryString("id") - 1).show();
            $(".options li").removeClass('current').eq(GetQueryString("id") - 1).addClass('current');

        }


        if (GetQueryString("page")) {

            if (GetQueryString("page") == 1) {
                $(".card li").hide().eq(0).show();
                console.log("page1")
            } else {
                console.log("page2")


                $(".card li").hide().eq(GetQueryString("page") - 1).show();
                $(".options li").removeClass('current').eq(GetQueryString("page") - 1).addClass('current');
            }

        }

        // 请求合作方式接口
        cooperationModeApi();
        $("#cooperationMode").click(function() {
            cooperationModeApi();
        });
        //请求合作伙伴接口
        $("#cooperativePartner").click(function() {
            cooperativePartnerApi();
        });
        if (GetQueryString("id") == 2 || GetQueryString("page") == 2) {
            cooperativePartnerApi();
        }
        backgroundApi()
    </script>

</body>

</html>